<template>
  <div class="portal">
    <div class="article-list">
      <div
        class="item"
        v-for="item in articleList"
        :key="item.articleId"
        @click="
          $router.push({
            path: 'article/view',
            query: { articleId: item.articleId },
          })
        "
      >
        <span class="article-title">{{ item.articleTitle }}</span>
        <hr />
        {{ item.articleAbstract }}
      </div>
    </div>
    <div class="article-page">
      <!-- 分页 -->
      <div class="prev-page" @click="previousPage">上一页</div>
      <div>第{{ pageInfo.current }}页，总{{ totalPage }}页</div>
      <div class="next-page" @click="nextPage">下一页</div>
    </div>
  </div>
</template>

<script>
import {
  getArticleList,
  getArticleAllTypeList,
} from '@/network/api/blog/article'

export default {
  name: 'dashboard',
  data() {
    return {
      articleList: [],
      typeList: [],
      pageInfo: {
        current: 1,
        size: 20,
        total: 0,
      },
    }
  },
  computed: {
    totalPage: function() {
      return Math.ceil(this.pageInfo.total / this.pageInfo.size)
    },
  },
  created() {
    this.getArticleList()
    this.getAllTypeList()
  },
  methods: {
    getArticleList() {
      getArticleList({}, this.pageInfo).then((response) => {
        this.articleList = response.data.records
        this.pageInfo.current = response.data.current
        this.pageInfo.total = response.data.total
      })
    },
    getAllTypeList() {
      getArticleAllTypeList((response) => {
        this.typeList = response.data
      })
    },
    previousPage() {
      this.pageInfo.current = this.pageInfo.current - 1
      if (this.pageInfo.current < 1) {
        this.pageInfo.current = 1
      }
      this.getArticleList()
    },
    nextPage() {
      this.pageInfo.current = this.pageInfo.current + 1
      if (this.totalPage > 0 && this.pageInfo.current > this.totalPage) {
        this.pageInfo.current = this.totalPage
      }
      this.getArticleList()
    },
  },
}
</script>

<style scoped>
.portal {
  display: grid;
  grid-template-rows: 1fr auto;
  height: 100%;
  overflow-y: auto;
  width: 100%;
}
.article-page {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  padding-top: 5px;
}
.article-list {
  width: 99%;
  height: 99%;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  padding-top: 5px;
  overflow-y: auto;
}
.article-title {
  font-size: 1.17em;
}
.article-list .item {
  width: 300px;
  height: 150px;
  background-color: #fbf1e4;
  margin: 5px;
}

.prev-page {
  background-color: lightskyblue;
  margin-right: 2px;
}

.next-page {
  background-color: lightskyblue;
  margin-left: 2px;
}
@media screen and (max-width: 300px) {
  .article-list .item {
    width: 100%;
    height: 150px;
    background-color: #fbf1e4;
    margin: 5px;
  }
}
</style>
